<template>
  <!-- <h1>111</h1> -->
  <div class="detail" >
    <div class="Img">
      <div class="img">
        <img class="leftgo" src="./img/left.png" alt="" @click="detaail()" />
        <img class="imgs" v-lazy="film.poster" />
      </div>
    </div>

    <div class="box">
      <div class="box2">
        <span class="name">{{ film.name }}</span>
        <span class="D">{{ filmtype.name }}</span>
        <span class="fen" v-if="flag"
          ><i>{{ film.grade }}</i
          >&nbsp;分</span
        >
      </div>
      <div class="theme">{{ film.category }}</div>
      <div class="times">{{ film.premiereAt | timeparser }}上映</div>
      <div class="dress">{{ film.nation }}|{{ film.runtime }}分钟</div>
      <div>
        {{ film.synopsis }}
      </div>
    </div>

    <div class="photo">
      <div class="actor">演职人员</div>
      <comswiper :key="film.actors.length">
        <div
          v-for="(item, index) in film.actors"
          :key="index"
          class="swiper-slide"
        >
          <div class="act">
            <img v-lazy="item.avatarAddress" /><br />
            <span class="one">{{ item.name }}</span
            ><br />
            <span class="two">{{ item.role }}</span>
          </div>
        </div>
      </comswiper>
    </div>
    <div class="stills" v-if="film.photos">
      <div class="actor">剧照</div>
      <comswiper :key="film.photos.length">
        <div
          v-for="(item, index) in film.photos"
          :key="index"
          class="swiper-slide"
        >
          <div class="acts" style="width:100%">
            <img v-lazy="item" /><br />
            <!-- <span class="one">{{ item.name }}</span
            ><br />
            <span class="two">{{ item.role }}</span> -->
          </div>
        </div>
      </comswiper>

    </div>

    <div class="buy">
      <span>选座购买</span>
    </div>
  </div>
</template>

<script>
import moment from "moment";

import comswiper from "@/components/comswiper.vue";
import { moiveDetail } from "@/api/api";

export default {
  //组件名字
  name: "detail",
  //接收父组件给的东西 type是接收什么东西  default 默认值
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    color: {
      type: String,
      default: "#000",
    },
  },
  //组件注册
  components: { comswiper },
  // vue数据集中管理
  data() {
    return {
      value: "1",
      film: { actors: [] },
      filmtype: {},
      flag: false,
    };
  },
  //方法 函数写这里
  methods: {
    detaail() {
      setTimeout(() => {
        this.$router.push("/film/nowplaying");
      }, 0);
    },
  },
  //计算属性
  computed: {},
  //侦听器
  watch: {},
  //过滤器
  filters: {
    toUpcase(value) {
      return value ? value.toUpperCase() : "";
    },
    timeparser(value) {
      return moment(value * 1000).format("YYYY-MM-DD");
    },
  },
  //以下是生命周期
  //组件创建之前
  beforeCreate() {},
  //组件创建之后
  created() {
    this.eventBus.$emit("footernav", false);
  },

  //页面渲染之前
  beforeMount() {},
  //页面渲染之后
  async mounted() {
    console.log("我进入detail页面的 mounted里面了");
    console.log(this.$route.params.filmId);
    let ret = await moiveDetail(this.$route.params.filmId);
    //http.get(moiveDetailUrl + filmId)
    console.log(ret);
    this.film = ret.data.data.film;
    this.filmtype = ret.data.data.film.item;
    if (this.film.grade > 0) {
      this.flag = true;
    }
  },
  //页面销毁之前
  beforeDestroy() {},
  //页面销毁之后
  destroyed() {
    this.eventBus.$emit("footernav", true);
  },
  //页面视图数据更新之前
  beforeUpdate() {},
  //页面视图数据更新之后
  updated() {},
  //组件路由守卫enter
  beforeRouteEnter(to, from, next) {
    next((vm) => {});
    // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
  },
  //组件路由守卫update更新
  beforeRouteUpdate(to, from, next) {
    // 同一页面，刷新不同数据时调用，
    next();
  },
  //组件路由守卫离开
  beforeRouteLeave(to, from, next) {
    // 离开当前路由页面时调用
    next();
  },
};
</script>

<style lang="scss" scoped>
.D {
  font-size: 9px;
  background: #d2d6dc;
  color: #fff;
  height: 14px;
  line-height: 14px;
  margin: 0 5px;
  border-radius: 2px;
}

.Img {
  position: relative;
  overflow: hidden;

  width: 100%;
  height: 260px;
}

.imgs {
  width: 100%;
  position: absolute;
  top: -50%;
}
.leftgo {
  position: absolute;
  z-index: 22;
  width: 40px;
  height: 40px;
  opacity: 0.8;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  top: 8px;
  left: 5px;
}
.act {
  text-align: center;
  .two {
    color: #797d82;
    font-size: 10px;
  }
}
.box {
  position: relative;
  color: #797d82;
  padding: 15px;
}
.name {
  color: #2c3e50;
  font-size: 18px;
}
.theme {
  margin-top: 5px;
  margin-bottom: 5px;
}
.times {
  margin-bottom: 5px;
}
.dress {
  margin-bottom: 20px;
}
.box2 {
  width: 100%;
  //   background: #797d82;
  display: flex;
  align-items: center;
  position: relative;
}
.fen {
  //   width: calc(100%-100px);
  text-align: right;
  //  margin-left: 70px;
  color: orange;
  position: absolute;
  right: 10px;
}
.photo {
  margin-left: 10px;
}
.actor {
  color: #2c3e50;
  margin-bottom: 10px;
}
.swiper-slide {
  img {
    width: 80px;
  }
}
.buy {
  background: #ff5f16;
  position: fixed;
  text-align: center;
  line-height: 50px;
  z-index: 10;
  bottom: 0;
  width: 100%;
  height: 50px;
  span {
    font-size: 16px;
    color: #fff;
  }
}
.stills{
  
  margin-bottom: 60px;
  // opacity: 1;
  // z-index: 9999;
  // width: 100px;
  // overflow: hidden;
}

</style>
